import SEO from '../components/SEO'

<SEO
  title="Switch"
  description="The Switch component is used as an alternative for the Checkbox component, switch between enabled or disabled states."
/>

# Switch

The Switch component is used as an alternative for the [Checkbox](/checkbox) component, switch between enabled or disabled states.

Switch must always be accompanied by a label and follows the same keyboard workflow as a checkbox.

<carbon-ad />

## Import

```js
import { CSwitch } from '@chakra-ui/vue'
```

## Usage

```vue live=true
<c-form-control>
    <c-form-label html-for="email-alerts">Enable email alerts?</c-form-label>
    <c-switch id="email-alerts" />
</c-form-control>
```

## Sizes

Pass the size prop to change the `size` of the switch.

```vue live=true
<c-stack align="center" is-inline>
  <c-switch size="sm" />
  <c-switch size="md" />
  <c-switch size="lg" />
</c-stack>
```

## Switch background color

You can change the checked background color of the switch by passing the `color` prop.

```vue live=true
<c-stack is-inline>
  <c-switch color="vue" />
  <c-switch color="red" size="lg" />
</c-stack>
```

## Props

| Name               | Type                | Default | Description                                          |
| ------------------ | ------------------- | ------- | ---------------------------------------------------- |
| `size`             | `sm`, `md`, `lg`    |         | The size of the switch.                              |
| `color`            | `string`            |         | The background color of the switch when checked.     |
| `name`             | `string`            |         | The input name of the switch when used in a form.    |
| `value`            | `string`, `boolean` |         | The value of the switch.                             |
| `aria-label`       | `string`            |         | The aria-label of the switch for accessibility.      |
| `aria-labelledby`  | `string`            |         | The `aria-labelledby` of the switch for accessibility. |
| `isChecked`        | `boolean`           |         | If `true`, set the switch to the checked state.      |
| `defaultIsChecked` | `boolean`           |         | If `true`, the checkbox will be initially checked.   |
| `isDisabled`       | `boolean`           |         | If `true`, set the disabled to the invalid state.    |
| `isInvalid`        | `boolean`           |         | If `true`, set the switch to the invalid state.      |

## Slots

| Name    | Description                              |
| ------- | ---------------------------------------- |
| default | The children of the `CSwitch` component. |
